<template>
  <!--v-model传值表示模态框展示与否，值为布尔值 -->
  <!-- number 图片/视频可选择最大的数量，不写默认1个 -->
  <!-- modelType 设置展示类型类型 为视频/缩略图，传值2是视频，其他都是图片，包括不写 -->
  <!-- @getImgArr：获取最终选择结果的函数，实现子改父 -->

  <!-- formData.cover_img
  getImgArr  modalimgUrl -->

  <!-- <glo-check v-model="showImgModel" @getImgArr="getImgArr"/> -->
  <Modal
    v-model="modelValue"
    @on-ok="ok"
    width="960"
    class-name="check_modal"
    @on-visible-change="
      (e) => {
        !e && $emit('update:modelValue', false);
        imgChecked = [];
      }
    "
    :mask-closable="false"
    :draggable="true"
  >
    <template #header>
      <div class="left">素材库图片列表</div>
      <div class="right">
        <Input clearable @on-change="iptChange" />
      </div>
    </template>
    <Row>
      <!-- 左侧选项栏 -->
      <Col span="3" v-if="modelType != '2'">
        <div
          v-for="(item, i) in leftArr"
          :key="i"
          :class="[
            'tagstyle',
            leftChecked.name == item.name ? 'primary' : 'default',
          ]"
          @click="rightCheck(item)"
        >
          {{ item.name }}
        </div>
      </Col>
      <!-- 右侧图片展示 -->
      <Col :span="modelType != '2' ? '21' : '24'" class="right">
        <Scroll :on-reach-bottom="handleReachTop" :distance-to-edge="10">
          <main :style="{ paddingLeft: modelType != '2' ? '0' : '50px' }">
            <div
              v-for="(item, i) in rightArr"
              :key="i"
              :class="['img', imgChecked.includes(item) ? 'border' : '']"
              @click="imgCheck(item)"
            >
              <!-- modelType 不是2就是视频，其他都是图片，包括不填 -->
              <video
                muted
                controls
                loop
                :src="item"
                v-if="modelType == '2'"
              ></video>
              <img :src="item" alt="" v-else />
            </div>
          </main>
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: center;
              color: rgb(170, 170, 170);
            "
            v-if="rightArr.length >= total && rightArr.length > 0"
          >
            被你看完了
          </div>
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: center;
              color: rgb(170, 170, 170);
            "
            v-if="rightArr.length == 0"
          >
            暂无数据...
          </div>
        </Scroll>
      </Col>
    </Row>
  </Modal>
</template>

<script>
import { GetImgClassList, GetSingleImgList } from '@/api/wsh_user.js'
import { Message } from 'view-ui-plus'
export default {
  name: 'gloCheck',
  data () {
    return {
      // 左侧类别栏目选中与所有栏目
      leftChecked: { id: '', name: '所有' },
      leftArr: [],
      // 右侧选中的图片以及所有图片
      imgChecked: [],
      rightArr: [],
      // 查询数据
      queryInfo: {
        page: 1,
        pageSize: 10,
        type: this.modelType == '2' ? '2' : '1',
        name: '',
        category_id: ''
      },
      // 图片总数
      total: null,
    }
  },
  props: {
    modelValue: {
      required: true,
      type: Boolean,
    },
    number: {
      default: 1,
      type: Number,
    },
    modelType: {
      default: 1
    }
  },
  methods: {
    // 图片下拉滚动触发的函数
    handleReachTop () {
      return new Promise(resolve => {
        setTimeout(() => {
          this.queryInfo.pageSize += 10
          resolve()
        }, 1000)
      })
    },
    // 左侧栏目点击选择触发的函数
    rightCheck (params) {
      this.leftChecked = params
      this.queryInfo = {
        page: 1, pageSize: 10,
        type: this.modelType == '2' ? '2' : '1',
        category_id: params.id
      }
      this.imgChecked = []
    },
    // 点击图片触发的函数
    imgCheck (src) {
      if (this.imgChecked.includes(src)) {
        this.imgChecked = this.imgChecked.filter(item => item != src)
      } else {
        const num = parseInt(this.number)
        if ((num <= 1) || !num) {
          if (num <= 0) {
            Message.warning('所选图片超过上限，无法继续选择')
          } else {
            this.imgChecked[0] = src
          }
        } else {
          if (this.imgChecked.length >= num) {
            Message.warning('超过上限：' + num + '张图')
          } else {
            this.imgChecked.push(src)
          }
        }
      }
    },
    // 搜索触发的函数
    iptChange (e) {
      this.queryInfo = {
        page: 1, pageSize: 10,
        type: this.modelType == '2' ? '2' : '1',
        name: e.target.value
      }
    },
    // 选中图片确定触发的函数
    ok () {
      this.$emit('getImgArr', this.imgChecked)
    },
  },
  watch: {
    queryInfo: {
      handler () {
        GetSingleImgList(this.queryInfo).then(res => {
          this.total = res.total
          this.rightArr = res.list.map(item => item.path)
        })
      },
      deep: true
    }
  },
  created () {
    GetImgClassList().then(res => {
      this.leftArr = [
        {
          id: '',
          name: '所有'
        },
        ...res.list
      ]
    })
    GetSingleImgList(this.queryInfo).then(res => {
      this.total = res.total
      this.rightArr = res.list.map(item => item.path)
    })
  }
}
</script>

<style lang='less'>
.check_modal {
  .ivu-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
  }
  .left {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    color: #17233d;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .right {
    display: inline-block;
    width: 400px;
  }
  .ivu-modal-body {
    padding: 0;
  }
  .ivu-col {
    max-height: 500px;
    // overflow: scroll;
    overflow-x: hidden;
  }
  .right {
    .ivu-scroll-wrapper {
      height: 100%;
    }
    .ivu-scroll-container {
      width: 100%;
      height: 100% !important;
      main {
        display: flex;
        flex-wrap: wrap;
      }
    }
    .img {
      width: 150px;
      height: 150px;
      margin: 10px;
      display: flex;
      align-items: center;
      cursor: pointer;
      img,
      video {
        width: 100%;
        max-height: 140px;
      }
    }
    .border {
      border: 2px solid #5cadff;
    }
  }
}
.tagstyle {
  padding: 10px 20px;
  cursor: pointer;
  border-left: 1px solid #e8eaec;
  border-bottom: 1px solid #e8eaec;
  border-right: 1px solid #e8eaec;
  &:hover {
    background: #ccc;
  }
}
.default {
  background: #e8eaec;
}
.primary {
  background: #fff;
}
.ivu-row {
  max-height: 600px !important;
}
</style>